<template>
    <div :class="classValue">
        <div class="tip">{{tip}}</div>
        <div class="action" @click="clickAction">
            <TechIcon :name="actionIcon" />
            {{actionTip}}
        </div>
    </div>
</template>

<script>
import TechIcon from './TechIcon';
export default {
    name: 'ActionTip', // 可操作性的提示
    props: {
        position: {
            type: String,
            default: 'top', // top bottom
        },
        tip: String,
        actionIcon: {
            type: String,
            default: 'refresh',
        },
        actionTip: {
            type: String,
            default: '刷新',
        },
    },
    components: {
        TechIcon,
    },
    computed: {
        classValue() {
            const { position } = this.$props;
            return `tech-action-tip tip-positon-${position}`;
        },
    },
    methods: {
        clickAction() {
            this.$emit('action');
        },
    },
};
</script>

<style lang="less">
.tech-action-tip {
    position: fixed;
    z-index: 2003;
    left: @gap-md;
    right: @gap-md;
    .flex();
    align-items: center;
    background-color: rgba(0, 0, 0, .6);
    color: @white;
    font-size: @font-size;
    .p(@gap);
    border-radius: @border-radius;
    font-weight: 200;
    &.tip-position-top {
        top: @gap-md;
    }
    &.tip-position-bottom {
        bottom: @gap-md;
    }
    .tip {
        flex: 1;
    }
    .action {
        .flex-row-center();
        border-left: 1px dashed @gray;
        .tech-icon {
            .m-h(@gap-sm);
        }
    }
}
</style>
